<template>
    <div>
       <div style="margin-bottom: 12px">
           <el-input style="width: 350px; margin-right: 8px" v-model="ArticlePo.keyWords" prefix-icon="el-icon-search" size="small" placeholder="通过标题搜索文章"></el-input>
           <el-button type="primary" size="small" icon="el-icon-search" @click="find">搜索</el-button>
       </div>
        <div>
            <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        v-if="showEdit||showDel"
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        label="标题"
                        width="150">
                    <template slot-scope="scope">
                        <el-button  type="text" @click="goDetail(scope.row.id)" size="small">{{scope.row.title}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="edittime"
                        label="最近编辑时间"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="userUtile.nickname"
                        label="作者"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="category.catename"
                        label="所属"
                        show-overflow-tooltip>
                </el-table-column>

                <el-table-column label="操作" v-if="showDel||showEdit">
                    <template slot-scope="scope">
                        <el-button
                                v-if="showEdit"
                                size="mini"
                                @click="handleEdit( scope.row)">编辑</el-button>
                        <el-button
                                v-if="showDel"
                                size="mini"
                                type="danger"
                                @click="open(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <p style="display: inline;">
                <el-button style="margin-top: 10px" type="danger" v-if="showDel" size="small" :disabled="multiDleBtn" @click="multiDel1">批量删除</el-button>
            </p>
            <!-- 页码   -->
            <el-pagination
                    background
                    layout="prev, pager, next,sizes,total"
                    :page-count="ArticlePo.pageNum"
                    :page-size="ArticlePo.pageSize"
                    :page-sizes="[3,4,5]"
                    @size-change="handleSizeChange"
                    :total="total"
                    @current-change="changePage"
                    style="float: right;margin-right: 100px;margin-top: 10px" >
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Articlshow",
        props:['status','showEdit','showDel'],
        data(){
            return{
                total:0,
                multiDelArr: [],//批量删除数组
                multiDleBtn:true,//true的时候按钮禁用
                tableData: [{

                }
                ],
                ArticlePo:{
                    pageNum:1,
                    pageSize:3,
                    uid:JSON.parse(window.sessionStorage.getItem("loginU")).id,
                    keyWords:'',
                    status:this.status,
                    // enabled:1,
                    // locked:0
                }
            }
        },
        methods: {
            goDetail(aid){
                this.$router.replace({
                    path:'/articlDetailed',
                    query:{
                        aid:aid
                    }
                })
            },
            //批量删除
            multiDel1(){
                this.$confirm('此操作将永久删除'+this.multiDelArr.length+'条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let str='';
                    this.multiDelArr.forEach((item,i)=>{
                        str += 'ids='+item.id+'&';
                    })
                    this.deleteRequest('/aticle/multiDel?'+str).then(resp=>{
                        if(resp){
                            this.getArticls();//重新查询
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            open(data) {//删除弹出框
                this.$confirm('此操作将永久删除['+data.title+'], 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest('/aticle/delArticl/'+data.id).then(resp=>{
                        this.getArticls();//重新查询
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleEdit(row) {
                this.$router.replace({
                    path:'/articlEdit',
                    query:{
                        from:'post',
                        id:row.id
                    }
                })
            },
            handleDelete(index, row) {
                console.log(index, row);
            },toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                if(val.length>0){
                    this.multiDleBtn=false;
                    this.multiDelArr=val;//val就是选中的数据集合
                }else {
                    this.multiDleBtn=true;
                }
            },
            handleSizeChange(val) {
                this.ArticlePo.pageSize=val;
                this.getArticls();//重新查询
            },
            changePage(data){//函数自带data表示就是第几页
                this.ArticlePo.pageNum=data;
                this.getArticls();//重新查询
            },
            getArticls(){
                this.getRequest('/aticle/getArticls',this.ArticlePo).then((resp)=>{
                    if(resp){
                        this.tableData=resp.list;
                        this.total=resp.total;
                    }
                })
            },
            find(){
                this.getArticls();
            }
        },
        mounted() {

            this.getArticls();
        }
    }
</script>

<style scoped>

</style>